<template>
  <transition name="popup-slide-up">
    <div class="ebook-popup-list" v-show="get_font_family_visible  && get_setting_visible === 0">
      <div class="ebook-popup-title">
        <div class="ebook-popup-title-icon" @click="hide">
          <span class="icon-down2"></span>
        </div>
        <span class="ebook-popup-title-text">{{$t('book.selectFont')}}</span>
      </div>
      <div class="ebook-popup-list-wrapper">
        <div class="ebook-popup-item" v-for="(item, index) in fontFamilyList" :key="index"
             @click="setFontFamily(item.font)">
          <div class="ebook-popup-item-text" :class="{'selected': isSelected(item)}">{{item.font}}</div>
          <div class="ebook-popup-item-check" v-if="isSelected(item)">
            <span class="icon-check"></span>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { ebookMixin } from 'js/mixin'
import params from 'js/params'
import { setFontFamily } from 'js/storage'
export default {
  mixins: [ebookMixin],
  data() {
    return {
      fontFamilyList: params.fontFamily
    }
  },
  methods: {
    setFontFamily(font) {
      this.set_default_family(font)
      setFontFamily(this.get_fileName, font)
      if (font === 'Default') {
        this.get_book_handle.rendition.themes.font('Times New Roman')
      } else {
        this.get_book_handle.rendition.themes.font(font)
      }
    },
    isSelected(item) {
      return this.get_default_fontfamily === item.font
    },
    hide() {
      this.set_font_family_visible(false)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/global'
  .ebook-popup-list
    position: absolute
    bottom: 0
    left: 0
    z-index: 300
    width: 100%
    background: white
    box-shadow: 0 px2rem(-4) px2rem(6) rgba(0, 0, 0, .1)
    flex-direction: column
    .ebook-popup-title
      position: relative
      padding: px2rem(15)
      box-sizing: border-box
      border-bottom: px2rem(1) solid #b8b9bb
      text-align: center
      width: 100%
      Center()
      .ebook-popup-title-icon
        position: absolute
        left: px2rem(15)
        top: 0
        height: 100%
        font-size: px2rem(16)
        font-weight: bold
        Center()
      .ebook-popup-title-text
        font-size: px2rem(14)
        font-weight: bold
    .ebook-popup-list-wrapper
      .ebook-popup-item
        display: flex
        padding: px2rem(15)
        .ebook-popup-item-text
          flex: 1
          font-size: px2rem(14)
          text-align: left
          &.selected
            color: #346cb9
            font-weight: bold
        .ebook-popup-item-check
          flex: 1
          text-align: right
          font-size: px2rem(14)
          font-weight: bold
          color: #346cb9
</style>
